<template>
  <div class="newsList-container">

    <router-link v-for="(item, index) in newsList"
                 :key="index"
                 tag="section"
                 :to="'/home/newsList/newsInfo/'+item._id"
                 class="van-hairline--bottom">
      <div class="news-l">
        <img :src="item.img_url">
      </div>
      <div class="news-r">
        <h3>{{item.title}}</h3>
        <p>
          <span>发表时间：{{item.add_time | dateFormat()}}</span>
          <span>点击量：{{item.click}}</span>
        </p>
      </div>
    </router-link>
    <div class="more">
      <van-button type="primary"
                  size="large"
                  round
                  @click="getMore">加载更多</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      newsList: []
    }
  },
  created() {
    this.getNewsList()
  },
  methods: {
    // 请求新闻列表
    getNewsList() {
      let params = { pageNum: this.pageNum, pageSize: this.pageSize }
      this.axios.get('/news/newsList', { params }).then(res => {
        if (res.data.code == 0) {
          Toast(res.data.msg)
        } else if (res.data.code == 1) {
          if (res.data.newsList.length == 0) {
            Toast('没有更多了')
          }
          this.newsList = this.newsList.concat(res.data.newsList)
        }
      })
    },
    getMore() {
      this.pageNum++
      this.getNewsList()
    }
  }
}
</script>

<style lang="scss">
.newsList-container {
  section {
    display: flex;
    padding: 0.25rem;
    .news-l {
      width: 1.5rem;
      height: 1.5rem;
      background-color: #aaa;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .news-r {
      display: flex;
      width: 75vw;
      flex-direction: column;
      justify-content: space-between;
      padding: 0.15rem 0.2rem 0.15rem 0.3rem;
      h3 {
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      p {
        display: flex;
        margin: 0;
        justify-content: space-between;
      }
    }
  }
  .more {
    padding: 0.3rem;
    .van-button {
      font-size: 0.5rem;
    }
  }
}
</style>